.zonesTable {
  > *:first-child[role='row'] {
    background-color: var(--grey-100) !important;
  }

  [role='cell'] {
    padding: 8px 8px 8px 0px;
    position: relative;
    height: 64px;
    vertical-align: top;
  }

  input {
    width: 100%;
  }

  :global(.form-group) {
    margin-bottom: 0 !important;
    position: relative;
  }
}

.addZoneButton {
  border-top: 1px solid var(--grey-100);
  padding: 15px;
  display: flex;
  align-items: center;
}

.zoneHeader {
  display: flex !important;
  align-items: center !important;
  border: 1px solid var(--grey-100) !important;
  background-color: var(--grey-50) !important;
  padding: 14px var(--spacing-main) !important;
}

.zoneHeaderCell {
  flex: 1 !important;
  padding-right: var(--spacing-main) !important;
}

.zoneActionHeaderCell {
  width: 60px !important;
  text-align: end !important;
}

.zoneRow {
  display: flex !important;
  align-items: center !important;
  border: 1px solid var(--grey-100) !important;
  background-color: var(--grey-0) !important;
  border-top: none !important;
  padding: 8px var(--spacing-main) !important;
}

/* Added CSS classes to replace inline styles */
.relativePosition {
  position: relative;
}

.marginTop20 {
  margin-top: 30px;
}

.zoneConfigTitle {
  margin-bottom: var(--spacing-xsmall) !important;
}

.actionButton {
  margin-top: var(--spacing-small) !important;
}

.flexCenter {
  display: flex;
  justify-content: center;
}

.cursorPointer {
  cursor: pointer;
}

.actionText {
  cursor: pointer;
  font-weight: 500;
}

.zonesContainer {
  border: 1px solid var(--grey-100);
  border-radius: var(--spacing-xsmall);
  margin-bottom: 15px;
}

.zoneCell {
  flex: 1 !important;
  padding: var(--padding-button) var(--padding-button) var(--padding-button) 14px !important;
}

.zoneActionCell {
  width: 60px !important;
  text-align: end !important;
  padding: var(--padding-button) !important;
}

.buttonContainer {
  display: flex;
  margin-top: var(--spacing-medium) !important;
  gap: var(--spacing-medium);
}

.actionButton {
  margin-top: 0 !important;
}

.cancelButton {
  margin-top: 0 !important;
}

.infoNoteContainer {
  margin-top: var(--spacing-medium) !important;
}

.infoNote {
  display: flex;
  align-items: flex-start;
}

.infoIcon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  color: var(--primary-7);
  margin-top: 2px;
}

.relativePosition {
  position: relative;
}

.inputContainer {
  margin-bottom: 0;
  display: inline-block;
  width: 100%;
}

.inputWrapper {
  position: relative;
  width: 100%;
  height: var(--spacing-8);
  border-radius: var(--spacing-2);
  border: 1px solid var(--bp3-intent-color, var(--grey-200));
  outline: none;
  box-shadow: none;

  :global(input) {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    height: 100%;
    width: 100%;
    padding-right: 75px; /* Make space for the suffix */
  }
}

.customInput {
  border: none;
  background-color: transparent;
  outline: none;
  flex: 1;
  height: 100%;
  font-size: var(--font-size-normal);
}

.domainSuffix {
  position: absolute;
  right: 12px;
  top: 20%;
  color: var(--grey-500);
  pointer-events: none;
  z-index: 1;
}
